<template>
	<view class="bg-light">
		<scroll-view scroll-y="true" class="w-100" :style="'height:calc(100vh - 110rpx) '">
			<view class="bg-white py-2">
				<view class="mx-2 flex">
					<uni-icons class="flex-shrink mr-2" fontFamily="iconfont" color="#000" size="20">{{'\ue636'}}</uni-icons>
					<view class="flex flex-column w-100">
						<text class="font font-weight-bold">{{salesOrder.Sales_Address.replaceAll('/','')}}</text>
						<text class="mt-2 font-sm text-muted">{{salesOrder.Sales_Contacts}} {{salesOrder.Sales_Phone}}</text>
					</view>
				</view>
			</view>
			<view class="my-2 py-2 bg-white">
				<view class="mx-2">
					<view v-for="(item,index) in salesOrder.Children.sales_order_detail" :key="index" class="mt-2">
						<template v-if="item.Refundable_Quantity>0">
							<view class="flex">
								<view class="flex-shrink rounded overflow-hidden shadow" style="width: 180rpx; height: 180rpx;">
									<image :src="BASE_IMG+item.Specifications_Picture_URL" style="width: 100%;height: 100%;" mode=""></image>
								</view>
								<view class="ml-2 flex flex-column justify-between w-100">
									<text class="font font-weight-bold text-ellipsis">{{item.Article_Name}}</text>
									<view class="flex justify-between align-center">
										<text class="font-sm text-muted">{{item.Specifications_Name}}</text>
										<text v-if="salesOrder.Row_Status.charAt(1)=='3'||salesOrder.Row_Status.charAt(1)=='4'||salesOrder.Row_Status.charAt(1)=='5'" class="font-sm text-danger border border-danger rounded-circle px-1 py-1" @click="saveRefunds(item)">申请售后</text>
									</view>
									<view class="flex justify-between">
										<money :money="item.Sales_Unit_Price"></money>
										<text class="font">×{{item.Refundable_Quantity}}</text> 
									</view>
								</view>
							</view>
						</template>
						<view v-for="(ite,inde) in item.refund" :key='inde'>
							<view class="flex mt-2">
								<view class="flex-shrink rounded overflow-hidden shadow" style="width: 180rpx; height: 180rpx;">
									<image :src="BASE_IMG+item.Specifications_Picture_URL" style="width: 100%;height: 100%;" mode=""></image>
								</view>
								<view class="ml-2 flex flex-column justify-between w-100">
									<text class="font font-weight-bold text-ellipsis">{{item.Article_Name}}</text>
									<view class="flex justify-between align-center">
										<text class="font-sm text-muted">{{item.Specifications_Name}}</text>
										<text v-if="ite.Row_Status=='00'||ite.Row_Status=='10'" @click="handle(item)" class="font-sm text-warning border border-warning rounded-circle px-1 py-1">退款审核</text>
										<text v-else-if="ite.Row_Status=='01'||ite.Row_Status=='11'" @click="handle(item)" class="font-sm text-success border border-success rounded-circle px-1 py-1">退款成功</text>
									</view>
									<view class="flex justify-between">
										<money :money="item.Sales_Unit_Price"></money>
										<text class="font">×{{ite.Quantity}}</text> 
									</view>
								</view>
							</view>
						</view>
						<!-- 物流信息 -->
						<view v-for="(item,index) in logisticsNumber(item.Sales_Order_Detail_SerialNumber)" :key="index">
							<view class="flex justify-between align-center py-1">
								<text class="font">发货时间</text>
								<text class="font text-muted">{{DateTime(item.Delivery_Data)}}</text>
							</view>
							<view class="flex justify-between align-center py-1" >
								<text class="font">{{item.Logistics_Name}}</text>
								<view class="flex justify-end align-center">
									<text class="font text-muted text-ellipsis-1 text-right" style="width: 400rpx;">{{item.Logistics_Number}}</text>
									<text class="font text-muted mx-1">&nbsp;|&nbsp;</text>
									<text @click="handlelogistic(item.Logistics_Number)" class="font-sm flex-shrink">查看</text>
								</view>
							</view>
						</view>
						<!-- 实付款 -->
						<uni-collapse>
							<uni-collapse-item titleBorder="none" border="none" title="实付款" :showArrow="false">
								<template v-slot:title>
									<view class="flex justify-between align-center py-1">
										<view class="justify-between w-100 align-center">
											<text class="font">实付款</text>
											<uni-icons color="#bbb" size="14" type="bottom"></uni-icons>
										</view>
										<money color="#000" :money="item.Reality_Amount"></money>
										<!-- {{refund(item.refund,item.Reality_Amount)?"(已退"+refund(item.refund,item.Reality_Amount)+"元)":""}} -->
									</view>
								</template>
								<view class="flex justify-between align-center py-1">
									<text class="font">商品总价</text>
									<money color="#000" :money="item.Amount"></money>
								</view>
								<view class="flex justify-between align-center py-1">
									<text class="font">积分抵扣</text>
									<money color="#dc3545" before="减" :money="accSub(item.Amount,accMul(item.Reality_Amount,item.Quantity))"></money>
								</view>
								<view class="flex justify-between align-center pt-1 pb-2">
									<text class="font">积分消费</text>
									<text class="font">{{item.Sales_Point}}</text>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
					<!-- 订单信息 -->
					<view class="flex justify-between border-top pt-1">
						<text class="font flex-shrink" style="width: 30%;">订单编号</text>
						<view class="flex justify-end align-center">
							<text class="font text-muted text-ellipsis-1 text-right" style="width: 400rpx;">{{salesOrder.Sales_Order_SerialNumber}}</text>
							<text class="font text-muted mx-1">&nbsp;|&nbsp;</text>
							<text @click="copy(salesOrder.Sales_Order_SerialNumber)" class="font-sm flex-shrink">复制</text>
						</view>
					</view>
					<view class="flex justify-between my-2">
						<text class="font">付款状态</text>
						<text class="font" :class="Type(salesOrder)[1]">{{Type(salesOrder)[0]}}</text>
					</view>
					<uni-collapse>
						<uni-collapse-item title="更多订信息" :showArrow="false">
							<template v-slot:title>
								<view class="flex justify-between align-center pb-1">
									<view class="flex justify-between w-100 align-center">
										<text class="font">更多信息</text>
										<uni-icons color="#bbb" size="14" type="bottom"></uni-icons>
									</view>
								</view>
							</template>
							<view class="flex justify-between align-center py-1">
								<text class="font">创建时间</text>
								<text class="font text-muted">{{DateTime(salesOrder.Sales_Date)}}</text>
							</view>
							<view class="flex justify-between align-center py-1">
								<text class="font">付款时间</text>
								<text class="font text-muted">{{DateTime(salesOrder.collection_date01)}}</text>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<view class="flex justify-center align-center position-relative pt-2">
						<uni-icons size="18" type="chat"></uni-icons>
						<text class="font py-1">联系商家</text>
						<button id="shareBtn" class="rounded-circle" open-type="contact"></button>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="fixed-bottom shadow flex align-center justify-between bg-white" style="height: 110rpx;">
			<view v-if="salesOrder.Row_Status.charAt(1)=='6'" @click="handlesubmit('remove',salesOrder)" class="mx-3 bg-muted px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">删除订单</text>
			</view>
			<view v-if="salesOrder.Row_Status.charAt(1)=='2'" @click="handlesubmit('pay',salesOrder)" class="mx-3 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">继续支付</text>
			</view>
			<view v-if="salesOrder.Row_Status.charAt(1)=='2'" @click="handlesubmit('cancel',salesOrder)" class="mx-3 bg-muted px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">取消订单</text>
			</view>
			<view v-if="salesOrder.Row_Status.charAt(1)=='4'" @click="handlesubmit('receipt',salesOrder)" class="mx-3 bg-muted px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">确认收货</text>
			</view>
			<!-- <view v-if="salesOrder.Row_Status.charAt(0)=='0'&&(salesOrder.Row_Status.charAt(1)=='3' || salesOrder.Row_Status.charAt(1)=='4')" 
				@click="handlesubmit('buy',salesOrder)" class="mx-3 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">再来一单</text>
			</view>
			<view v-else-if="salesOrder.Row_Status.charAt(0)=='1'&&(salesOrder.Row_Status.charAt(1)=='3' || salesOrder.Row_Status.charAt(1)=='4')"
				@click="handlesubmit('cart',salesOrder)" class="mx-3 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">加入购物车</text>
			</view> -->
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" style="width: 90vw;" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="pb-2" style="height: calc(100vh - 110rpx); overflow: auto;">
					<view class="mx-2" v-for="(item,index) in logisticsContext" :key="index">
						<view class="flex my-1">
							<text class="font font-weight-bold">{{item.time}}</text>
						</view>
						<view class="mx-1 px-1 shadow rounded">
							<text class="font-sm">{{item.context}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import money from "@/components/tool/money.vue";
	import timeline from '@/components/tool/timeline.vue';
	import counter from "@/components/tool/counter.vue";
	import Base64 from "base-64";
	import { accSub,accMul, accAdd } from "@/static/js/GeneralUtil.js";
	import { DateTime } from "@/static/js/DateUtil.js";
	import { mixins } from "./js/order.js"
	import { generalQueryBySQLSerialNumber,generalQueryByTableName } from '@/api/generalBusiness.js';
	import { getWayBillStatus,saveRefunds,getUserSalesOrderListBySalesOrderSerialNumber } from "@/api/salerOrder.js"
	export default {
		components:{
			money, counter
		},
		mixins:[mixins],
		data() {
			return {
				salesOrder:{
					Sales_Address:'',
					Children:{
						sales_order_detail:[]
					},
					Row_Status:'',
				},
				Sales_Order_SerialNumber:'',
				logistics:[],
				logisticsContext:[],
				Refund:{
					max:1,
					Sales_Order_Detail_SerialNumber:'',
					Refund_Message:'',
					Quantity:1,
				},
			}
		},
		onLoad(options) {
			this.Sales_Order_SerialNumber = options.salesOrder;
			this.getData();
		},
		onShow() {
			if(this.Sales_Order_SerialNumber){
				this.getData();
			}
		},
		computed:{
			...mapState(['Open_ID','App_ID','BASE_IMG']),
			logisticsNumber(){
				return function (Sales_Order_Detail_SerialNumber){
					let arr = this.logistics.filter(i=>i.Sales_Order_Detail_SerialNumber == Sales_Order_Detail_SerialNumber);
					return arr;
				}
			},
			refund(){
				return function(refund,Reality_Amount){
					let str = 0;
					refund.forEach(item=>{
						str = accAdd(str,accMul(item.Quantity,Reality_Amount));
					})
					return str;
				}
			},
			accSub(){
				return function(str1,str2){
					return accSub(str1,str2)
				}
			},
			accMul(){
				return function(str1,str2){
					return accMul(str1,str2)
				}
			},
			DateTime(){
				return function(str){
					return DateTime(str);
				}
			},
			Type() {
			    return function (row) {
			        if (false){
					// (row.Refunded_Quantity == row.Quantity) {
					//     return ["已退款", "info"]
			  //       } else if (row.Refunded_Quantity >0){
					// 	return ["部分退款", "info"]
					} else {
			            let str = row.Row_Status;
			            switch (str.charAt(1)) {
			                case "0":
			                    return ["待付款", ""];
			                case "1":
			                    return ["待付款", ""];
			                case "2":
			                    return ["待付款", ""];
			                case "3":
			                  return   ["已付款", "text-success"];
			                case "4":
			                    return ["已发货", "text-warning"];
			                case "5":
			                    return ["已收货", "text-danger"];
			                case "6":
			                    return ["已取消", ""];
			                case "7":
			                    return ["已取消", ""];
			                default:
			                    return ""
			            }
			        }
			    }
			},
			isRefunds(){
				return function (item){
					let is = false;
					let Row_Status = this.salesOrder.Row_Status.charAt(1);
					if(Row_Status=='3'||Row_Status=='4'||Row_Status=='5'){
						if(item.Refund_Type==''||item.Refund_Type=='02'||item.Refund_Type=='12'||item.Refund_Type=='22'){
							is = true;
						}
					}
					return is
				}
			}
		},
		methods: {
			copy(value){
				uni.setClipboardData({
					data: value
				});
			},
			async handlelogistic(Logistics_Number){
				if(Logistics_Number){
					this.logisticsContext = [];
					const res = await getWayBillStatus({
						Data:Logistics_Number
					})
					if(res.message=='ok'){
						this.logisticsContext = res.data;
						this.$refs.popup.open('left');
					}
				}
			},
			async getData(){
				const res = await getUserSalesOrderListBySalesOrderSerialNumber({
					OpenId:this.Open_ID,
					SalesOrderSerialNumber:this.Sales_Order_SerialNumber
				})
				if(res.length == 1){
					let sql = "";
					let sql1 = "";
					res[0].Children.sales_order_detail.forEach((item,index)=>{
						if(index){
							sql = sql + " OR business_sales_order_logistics.Sales_Order_Detail_SerialNumber='"+item.Sales_Order_Detail_SerialNumber+"'";
							sql1 = sql1 + " OR business_refund_detail.Sales_Order_Detail_SerialNumber = '"+item.Sales_Order_Detail_SerialNumber+"'";
						}else{
							sql = "business_sales_order_logistics.Sales_Order_Detail_SerialNumber='"+item.Sales_Order_Detail_SerialNumber+"'";	
							sql1 = "business_refund_detail.Sales_Order_Detail_SerialNumber='"+item.Sales_Order_Detail_SerialNumber+"'";
						}
					})
					const res2 = await generalQueryBySQLSerialNumber({
						SQLSerialNumber:'M_business_refund_detail1',
						Condition:'',
						ExtensionCondition:Base64.encode("AND ("+sql1+") AND SUBSTRING(business_refund.Row_Status,2,1) <> '2'"),
					});
					// console.log("AND ("+sql1+") AND SUBSTRING(business_refund.Row_Status,2,1) <> '2'");
					res[0].Children.sales_order_detail.forEach(item=>{
						item.refund = res2.filter(i=>i.Sales_Order_Detail_SerialNumber==item.Sales_Order_Detail_SerialNumber)
					})
					
					this.salesOrder = res[0];
					const res1 = await generalQueryBySQLSerialNumber({
						SQLSerialNumber:'M_business_sales_order_logistics',
						Condition:'',
						ExtensionCondition:Base64.encode(`AND (${sql})`)
					});
					this.logistics = res1;
				}
			},
			async handle(item){//查询当前订单的售后订单
				const res = await generalQueryBySQLSerialNumber({
					SQLSerialNumber:'M_business_refund',
					Condition:Base64.encode(item.Sales_Order_Detail_SerialNumber),
					ExtensionCondition:''
				}) 
				if(res.length==1){
					uni.navigateTo({
						url:'/pages/my/afterSalesDetail?Refund_SerialNumber='+res[0].Refund_SerialNumber
					})
				}
			},
			async saveRefunds(item){//退款申请
				uni.navigateTo({
					url:'/pages/my/afterSalesApply?Sales_Order_Detail_SerialNumber='+item.Sales_Order_Detail_SerialNumber,
				});
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
</style>